<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String operation = request.getParameter("operation");
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<%@ include file="/common/common-css.jsp" %>
	<style>
		.table > th {
		  vertical-align: center;
		  background-color: grey;
		}
	</style>		
</head>
<body class="no-skin">
	<div class="page-content">
			<div class="page-header"></div>
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<div class="widget-box widget-color-blue">
						<!-- #section:custom/widget-box.options.collapsed -->
						<div class="widget-header widget-header-small">
							<h6 class="widget-title lighter">
								<i class="ace-icon glyphicon glyphicon-th-list"></i>基本信息
							</h6>
                            <div class="widget-toolbar no-border">
								<a href="#" data-action="collapse">
									<i class="ace-icon fa fa-chevron-up"></i>
								</a>
							</div>
						</div>
						
						<div class="widget-body">
							<div class="widget-main" >
								<form class="form-horizontal" id="queryForm" name="queryForm" method="post" enctype="multipart/form-data">
									
									<input type="hidden" name="id"  id="id" placeholder="" class="col-xs-12 col-sm-6" value="${paramsMap.model.id}">
									
									<table id="baseinfo" class="table table-bordered table-striped table-hover table-condensed table-responsive">
										<tr>
											<th >专题名</th>
											<td >
												<input type="text" name="name"  id="name" class="col-xs-11 col-sm-11" value="${paramsMap.model.name}">
											</td > 
										</tr>
										
										<tr>
									    	 <th>奖品banner图</th>
										     <td >
												<div class="form-group col-sm-10 col-xs-12">	 
													 <input id="image" name="image" type="hidden" value="" >
													 <div class="form-group col-sm-12 view-banner">
													     <!--展示图片的容器-->
														 <div id="manyView" class="view no-border"></div>
													 </div>
												 </div>
												 <div class="form-group col-sm-1 col-xs-12 text-center"> 
													 <button class="btn btn-primary get-img-modal" data-title="banner" data-selector=".view-banner" data-input="#prd_img" data-multiple="1">添加</button>
												 </div>
												 
											 </td >
									  	</tr>
										<tr>
											<th>奖品略缩图</th>
											<td>
												<div >
										   			<img style="width:139px;height:101px" id="thumbnail_img" name="thumbnail_img" src="${paramsMap.model.thumbnail}" onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'" style= "max-height:250px;"/>
										    		<input id="thumbnail" name="thumbnail" type="hidden" value="" >
										    	</div>
												<div class="form-group col-sm-1 col-xs-12 text-center"> 
													 <button class="btn btn-primary get-img-modal2" data-title="略缩图" data-selector=".view-banner" data-input="#prd_img" data-multiple="1">添加</button>
												 </div>
											<td>
										</tr>
										<tr>
											<th>奖品略缩图2</th>
											<td>
												<div >
										   			<img style="width:139px;height:101px" id="thumbnail_img2" name="thumbnail_img2" src="${paramsMap.model.thumbnail2}" onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'" style= "max-height:250px;"/>
										    		<input id="thumbnail2" name="thumbnail2" type="hidden" value="" >
										    	</div>
												<div class="form-group col-sm-1 col-xs-12 text-center"> 
													 <button class="btn btn-primary get-img-modal3" data-title="略缩图" data-selector=".view-banner" data-input="#prd_img" data-multiple="1">添加</button>
												 </div>
											<td>
										</tr>
										<tr>
											<th>开始/结束时间</th>
											<td>
												<div class="input-daterange input-group col-sm-12">
														<input type="text" data-date-format="yyyy-mm-dd hh:ii:ss" class="fromDate date-picker input-sm form-control" style="padding-left:0px" name="begin_date" value="${paramsMap.model.begin_date}">
														<span class="input-group-addon" style="width:6px">
															<i class="fa fa-exchange"></i>
														</span>
														<input type="text" data-date-format="yyyy-mm-dd hh:ii:ss" class="endDate date-picker input-sm form-control" style="padding-left:0px" name="end_date" value="${paramsMap.model.end_date}">
												</div>
											</td>
										</tr>
										<tr>
											<th>1人次需几积分数</th>
											<td>
												<input type="text" name="cost_point"  id="cost_point" placeholder="" class="col-xs-11 col-sm-11" value="${paramsMap.model.cost_point}">
											<td>
										</tr>
										<tr>
											<th>中奖人手机号</th>
											<td>
												<input type="text" name="phone"  id="phone" placeholder="" class="col-xs-11 col-sm-11" value="${paramsMap.model.phone}">
											<td>
										</tr>
										<tr>
											<th>中奖人ID</th>
											<td>
												<input type="text" name="userid"  id="userid" placeholder="" class="col-xs-11 col-sm-11" value="${paramsMap.model.userid}">
											<td>
										</tr>
										<tr>
											<th>中奖人参与人次</th>
											<td>
												<input type="text" name="join_count"  id="join_count" placeholder="" class="col-xs-11 col-sm-11" value="${paramsMap.model.join_count}">
											<td>
										</tr>
										<tr>
											<th>初始参与人数</th>
											<td>
												<input type="text" name="init_count"  id="init_count" placeholder="" class="col-xs-11 col-sm-11" value="${paramsMap.model.init_count}">
											<td>
										</tr>
										<tr>
											<th>商品介绍</th>
											<td>
												<textarea id="editor_1" name="prd_detail"  style="width:800px;height:500px;">
													${paramsMap.model.prd_detail}
												</textarea>
											<td>
										</tr>
										<tr>
											<th>展开图文详情</th>
											<td>
												<textarea id="editor_2" name="more_info"  style="width:800px;height:500px;">
													${paramsMap.model.more_info}
												</textarea>
											<td>
										</tr>
										<tr>
											<th>活动说明</th>
											<td>
												<textarea id="editor_3" name="campa_detail"  style="width:800px;height:500px;">
													${paramsMap.model.campa_detail}
												</textarea>
											<td>
										</tr>
									</table>
								</form>
							</div><!-- /.widget-main -->
						</div><!-- /.widget-body -->
						
					</div><!-- /.widget-box -->
				</div><!-- /.col-sm-12 -->
			</div><!-- /.row -->
				
					<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
							<button class="btn  btn-inverse  no-border " onclick="doCancle()" id="delete"> 
								<i class="ace-icon fa fa-undo bigger-160"></i>
								取消
							</button>
			
							&nbsp; &nbsp; &nbsp;
							<button id="btn-save" name="btn-save" class="btn  btn-success  no-border" type="button" onclick="doSave()">
								<i class="ace-icon fa fa-floppy-o bigger-160"></i>
								保存
							</button>
						</div>
					</div>
				
			</div>
		</div>

<!--模态框-->
<div class="modal fade" id="Modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body clearfix">
				<form id="addImage" name="addImage" method="post"
					enctype="multipart/form-data">
					<div class="row">
						<div class="form-group col-xs-12">
							<div class="input-group col-sm-12">
								<input type="file" class="form-control" id="myFile1" name="myFile" accept=".png,.jpg,.jpeg" />
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" disabled id="confirm">上传</button>
			</div>
		</div>
	</div>
</div>

<!--模态框-->
<div class="modal fade" id="Modal2">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body clearfix">
				<form id="addImge2" name="addImge2" method="post" enctype="multipart/form-data">
					<div class="row">
						<div class="form-group col-xs-12">
							<div class="input-group col-sm-12">
								<input type="file" class="form-control" id="myFile2" name="myFile" accept=".png,.jpg,.jpeg" />
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="confirm2">上传</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="Modal3">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body clearfix">
				<form id="addImge3" name="addImge3" method="post" enctype="multipart/form-data">
					<div class="row">
						<div class="form-group col-xs-12">
							<div class="input-group col-sm-12">
								<input type="file" class="form-control" id="myFile3" name="myFile" accept=".png,.jpg,.jpeg" />
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="confirm3">上传</button>
			</div>
		</div>
	</div>
</div>

<%@ include file="/common/common-js.jsp" %>
<%@ include file="/discovery/maxlength.jsp" %>

<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<script charset="utf-8" src="${ctx}/editor/kindeditor-all.js"></script>
<script charset="utf-8" src="${ctx}/editor/lang/zh-CN.js"></script>

<script>

KindEditor.ready(function(K) {
    window.editor = K.create('#editor_1',{
		cssPath : ['/loan_manager/editor/plugins/code/prettify.css', '/loan_manager/editor/plugins/custom/custom.css'],
		uploadJson : '/loan_manager/editor/jsp/upload_json.jsp',
		fileManagerJson : '/loan_manager/editor/jsp/file_manager_json.jsp',
		allowFileManager : true,
		afterCreate : function() { 
	        this.sync(); 
	
       }, 
       afterBlur:function(){ 
           this.sync(); 
       }
	});
});

KindEditor.ready(function(K) {
    window.editor = K.create('#editor_2',{
		cssPath : ['/loan_manager/editor/plugins/code/prettify.css', '/loan_manager/editor/plugins/custom/custom.css'],
		uploadJson : '/loan_manager/editor/jsp/upload_json.jsp',
		fileManagerJson : '/loan_manager/editor/jsp/file_manager_json.jsp',
		allowFileManager : true,
		afterCreate : function() { 
	        this.sync(); 
       }, 
       afterBlur:function(){ 
           this.sync(); 
       }
	});
});

KindEditor.ready(function(K) {
    window.editor = K.create('#editor_3',{
		cssPath : ['/loan_manager/editor/plugins/code/prettify.css', '/loan_manager/editor/plugins/custom/custom.css'],
		uploadJson : '/loan_manager/editor/jsp/upload_json.jsp',
		fileManagerJson : '/loan_manager/editor/jsp/file_manager_json.jsp',
		allowFileManager : true,
		afterCreate : function() { 
	        this.sync(); 
       }, 
       afterBlur:function(){ 
           this.sync(); 
       }
	});
});

</script>


<script>

$(function(){
	// 数据回显
	var images = "${paramsMap.model.image}";
	if (images && images != "") {
		var arr = images.split(",");
		$.each(arr, function(index, dom) {
			$("#manyView").append("<div><img src='"+arr[index]+"' style='height: 100px;'></img></div>");
		});
	}
	
	//给未来的删除按钮添加绑定事件
	$("body").delegate("#manyView img","click",function(e){
		$(this).parent().html("");
	});
});

$(function(){
	//日期时间插件
	$('.date-picker').datetimepicker({
		  	language:  'zh-CN',
	        weekStart: 1,
	        todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
			showMeridian: 1,
			format: 'yyyy-mm-dd hh:ii:ss'
	}).next().on(ace.click_event, function(){
		$(this).prev().focus();
	});
});

function doCancle() {
	try {
      	if(parent) {
        parent.parent['__extdialog_active'].dialog('close');
      }
    } catch(e) {
      window.history.back();
    }
};

function doSave() {
   
	var images = $("#manyView img");
	var urlInfo = [];
	$.each(images, function(index, dom){
		var url = $(dom).attr("src");
		urlInfo.push(url);
	})
	var p_images = "" + urlInfo;
	$("#image").val(p_images);
	
	var thumbnail_img = $("#thumbnail_img").attr("src");
	$("#thumbnail").val(thumbnail_img);
	$("#thumbnail2").val($("#thumbnail_img2").attr("src"));
	saveForm();
};

function saveForm(){
	var saveUrl = ctx+"/weeklyAwards/editInfo.action";
	console.log(saveUrl);
	var options = { 
		url :saveUrl,
		type : "POST",
		dataType : "json",
		beforeSend: function(){
			$(".load_bg,.load_img").show();
		},
		success : function(data) {
		    console.log('表单提交成功:', JSON.stringify(data));
		    parent.bootbox.alert(data.message);
		    parent.parent['__extdialog_active'].dialog('close');
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
		    alert(textStatus);
		    console.log(XMLHttpRequest, textStatus, errorThrown);
		},
       complete : function(){
			$(".load_bg,.load_img").hide();
		}
	};
	$('#queryForm').ajaxSubmit(options);
 
};

//点击按钮
$('.get-img-modal').on('click', function(){
	//展示模态框
    var $this = $(this);
	var $title = $this.attr('data-title');
	$input = $this.attr('data-input');
	$selector = $this.attr('data-selector');
	$multiple = $this.attr('data-multiple');
	$('#Modal').find('h4.modal-title').html($title);
	$('#Modal').modal('show');
	return false;
});

//点击按钮
$('.get-img-modal2').on('click', function(){
	//展示模态框
    var $this = $(this);
	var $title = $this.attr('data-title');
	$input = $this.attr('data-input');
	$selector = $this.attr('data-selector');
	$multiple = $this.attr('data-multiple');
	$('#Modal2').find('h4.modal-title').html($title);
	$('#Modal2').modal('show');
	return false;
});

//点击按钮
$('.get-img-modal3').on('click', function(){
	//展示模态框
    var $this = $(this);
	var $title = $this.attr('data-title');
	$input = $this.attr('data-input');
	$selector = $this.attr('data-selector');
	$multiple = $this.attr('data-multiple');
	$('#Modal3').find('h4.modal-title').html($title);
	$('#Modal3').modal('show');
	return false;
});


//上传按钮
$('#confirm').on('click', function(){
	if($('#myFile1').val() != ''){
		uploadImage();
	};
    return false;
});

//上传按钮
$('#confirm2').on('click', function(){
	if($('#myFile2').val() != ''){
		uploadImage2();
	};
    return false;
});

//上传按钮
$('#confirm3').on('click', function(){
	if($('#myFile3').val() != ''){
		uploadImage3();
	};
    return false;
});

$('#myFile1').on('change', function(){
	if($(this).val() != ''){
		$('#confirm').prop('disabled', false);
	}else{
		$('#confirm').prop('disabled', true);
	};
})

$('#myFile2').on('change', function(){
	if($(this).val() != ''){
		$('#confirm2').prop('disabled', false);
	}else{
		$('#confirm2').prop('disabled', true);
	};
})

$('#myFile3').on('change', function(){
	if($(this).val() != ''){
		$('#confirm3').prop('disabled', false);
	}else{
		$('#confirm3').prop('disabled', true);
	};
})

//上传到七牛的方法
function uploadImage() {
	var options = {
		url : "${ctx}/module/fileupload/fileUpload.action", 
		type : "POST",
		dataType : "json",
		beforeSend: function(){
			$(".load_bg,.load_img").show();
		},
		success : function(data) {
			$("#manyView").append("<div><img src='" + data + "' style='height: 100px;'></img></div>");
			//隐藏模态框
			$('#Modal').modal('hide');	
			//清空modal里面的input的值
			$('#myFile1').val('');
		},
		error: function(XMLHttpRequest, textStatus, errorThrown){
			alert(textStatus);
		},
		complete: function(){
			$(".load_bg,.load_img").hide();
		}
	}; 
	$('#addImage').ajaxSubmit(options); 
};

//上传到七牛的方法
function uploadImage2() {
	var options = {
			url : "${ctx}/module/fileupload/fileUpload.action", 
			type : "POST",
			dataType : "json",
			beforeSend: function(){
				$(".load_bg,.load_img").show(); 
			},
			success : function(data) {
				$("#thumbnail_img").removeAttr("src").attr("src", data);
				//隐藏模态框
				$('#Modal2').modal('hide');	
				//清空modal里面的input的值
				$('#myFile2').val('');
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus);
			},
			complete: function(){
				$(".load_bg,.load_img").hide();
			}
		}; 
		$('#addImge2').ajaxSubmit(options);
};

//上传到七牛的方法
function uploadImage3() {
	var options = {
			url : "${ctx}/module/fileupload/fileUpload.action", 
			type : "POST",
			dataType : "json",
			beforeSend: function(){
				$(".load_bg,.load_img").show(); 
			},
			success : function(data) {
				$("#thumbnail_img2").removeAttr("src").attr("src", data);
				//隐藏模态框
				$('#Modal3').modal('hide');	
				//清空modal里面的input的值
				$('#myFile3').val('');
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				alert(textStatus);
			},
			complete: function(){
				$(".load_bg,.load_img").hide();
			}
		}; 
		$('#addImge3').ajaxSubmit(options);
};


//接受URL参数，进行文档写入
function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return decodeURI(r[2]); return null;
}

</script>	
</body>
</html>
